<template>
  <div>
    <el-table
        :data="advanceList"
        style="width: 80%;margin: 20px auto;"
        border
    >
      <el-table-column
          prop="name"
          label="姓名"
          width="180"
      >
      </el-table-column>
      <el-table-column
          prop="date"
          label="时间"
      >
      </el-table-column>
      <el-table-column
          prop="money"
          label="预支款"
      >
      </el-table-column>
      <el-table-column
          prop="remark"
          label="描述"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              type="primary"
              @click="openEditAdvance(scope.row)"
          >
            审 核
          </el-button>
          <el-button
              type="danger"
              @click="openDeleteAdvance(scope.row)"
          >
            驳回并删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        title="驳回预支"
        :visible="deleteAdvanceVisible"
        :show-close="false"
        width="40%"
    >
      <span>你确定驳回并删除 <span style="color: red;">{{ advanceInfo.name }}</span> 的这条借款为 <span
          style="color: red;">{{ advanceInfo.money }}</span> 记录吗？</span>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="deleteAdvanceVisible = false">取 消</el-button>
        <el-button
            type="danger"
            @click="deleteAdvance"
        >确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="审核"
        :visible="editAdvanceVisible"
        :show-close="false"
        width="40%"
    >
      <el-form
          :model="advanceInfo"
          label-width="80px"
      >
        <el-form-item label="姓名">
          <el-input
              v-model="advanceInfo.name"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
              v-model="advanceInfo.date"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00">
          </el-date-picker>
<!--          <el-input v-model="advanceInfo.date"></el-input>-->
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="advanceInfo.money"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="advanceInfo.remark"></el-input>
        </el-form-item>
      </el-form>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="editAdvanceVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="editAdvance"
        >通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {api_deleteSalary, api_updateSalary} from '@/api'

export default {
  data() {
    return {
      advanceList: [],
      deleteAdvanceVisible: false,
      editAdvanceVisible: false,
      advanceInfo: {},
      date: [],
      pickerOptions: {
        disabledDate(time) {
          const today = new Date(); // 获取当前日期
          return time.getTime() > today.getTime(); // 将结束日期大于当前日期的日期禁用
        }
      }
    }
  },
  methods: {
    dateChange() {
      this.$http.get('/admin/auth/getAuditSalary')
          .then(res => {
            console.log(res)
            this.advanceList = res.data.data
          })


    },
    openDeleteAdvance(data) {
      this.deleteAdvanceVisible = true
      this.advanceInfo = data
    },
    deleteAdvance() {
      api_deleteSalary(this.advanceInfo).then(res => {
        if (res.status == 200) {
          this.deleteAdvanceVisible = false
          this.dateChange()

          this.$message({
            type: 'success',
            message: '驳回成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    openEditAdvance(data) {
      console.log(data)
      this.editAdvanceVisible = true
      this.advanceInfo = data
    },
    editAdvance() {
      let isoDate = this.advanceInfo.date;
      let dateObj = new Date(isoDate);
      let year = dateObj.getFullYear();
      let month = String(dateObj.getMonth() + 1).padStart(2, "0");
      let day = String(dateObj.getDate()).padStart(2, "0");
      let hours = String(dateObj.getHours()).padStart(2, "0");
      let minutes = String(dateObj.getMinutes()).padStart(2, "0");
      let seconds = String(dateObj.getSeconds()).padStart(2, "0");

      this.advanceInfo.date = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      api_updateSalary(this.advanceInfo).then(res => {
        if (res.status == 200) {
          this.editAdvanceVisible = false
          this.dateChange()
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: '操作成功'
          })
        }
      })
    }
  },
  computed: {
    formDate() {
      let arr = []
      if (this.date[0] && this.date[1]) {
        arr[0] = `${this.date[0].getFullYear()}-${this.date[0].getMonth() + 1}-${this.date[0].getDate()}`
        arr[1] = `${this.date[1].getFullYear()}-${this.date[1].getMonth() + 1}-${this.date[1].getDate()}`
      }
      return arr
    }
  },
  mounted() {
    // api_getSalary().then(res => {
    //   if (res.status == 200) {
    //     this.advanceList = res.data
    //   }
    // })
    //date设置为当天
    let today = new Date()
    this.date = [today, today]
    this.dateChange()
  }
}
</script>

<style>
</style>
